/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Variables
\* -------------------------------------------------------------- */

$mebox-photo_size: 28px !default;
$mebox-button_borderRadius: 3px !default;

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

.SpNotifications,
.SpInbox,
.SpBookmarks {
    &::before {
        @include kbicon();
    }
}

.SpNotifications::before {
    font-size: 24px;
    content: $kbicon-notifications-empty;
}

.SpInbox::before {
    font-size: 24px;
    content: $kbicon-message-empty;
}

.SpBookmarks::before {
    font-size: 22px;
    content: $kbicon-star-empty;
}

.Open {
    .SpNotifications::before {
        content: $kbicon-notifications;
    }

    .SpInbox::before {
        content: $kbicon-message;
    }

    .SpBookmarks::before {
        content: $kbicon-star;
    }
}

.MeBox {
    min-height: initial;
    display: flex;

    .MeButton {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: $icon-default_size;
        height: 32px;
        width: 32px;
        border-radius: $mebox-button_borderRadius;

        .Alert {
            line-height: 18px;
            min-width: 18px;
            height: 18px;
            display: flex;
            border-radius: 18px;
            align-items: center;
            justify-content: center;
            right: -8px;
            top: -9px;
            border-width: 1px;
            border-style: solid;

            @include maxWidth {
                top: 0;
            }
        }
    }

    .MeBox-mobileClose {
        appearance: none;
        background: none;
        border: none;
        outline: none;
        font-size: 24px;
        color: rgba($global-color_white, 0.7);
        display: none;

        @include minWidth() {
            display: none;
        }
    }

    .MeButton-user .ProfilePhoto {
        width: $mebox-photo_size;
        height: $mebox-photo_size;
        border-radius: $mebox-photo_size;
    }

    .Flyout {
        top: 100%;
    }

    .SignInIcons:empty {
        display: none;
    }
}

.MeBox.FlyoutRight .Flyout {
    right: 0;
}

.SignInIcons {
    margin-left: $utility-baseUnitTriple;
}

// Reset base theme style
.UserBox .WhoIs,
.MeBox .WhoIs {
    min-height: initial;
    line-height: inherit;
}

.MeBox-header {
    @include maxWidth($theme-breakpoint_base) {
        display: none;
    }

    .SignInLinks {
        .Bullet {
            display: none;
        }
    }

    .MeBox,
    .MeMenu,
    .WhoIs {
        display: flex;
        align-items: center;
    }

    .MeMenu {
        margin-left: $utility-baseUnitTriple;
        display: flex;
        align-items: center;

        .ToggleFlyout + .ToggleFlyout {
            margin-left: 8px;
        }
    }
}
